<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <!-- <script src="https://unpkg.com/vue@3.5.21/dist/vue.global.js"></script> -->
    <script src="../assets/vue3.js"></script>

     <style>
        .content{

            border: solid 0.5px grey;
            margin: 20px;


        }

    </style>
</head>

<body>
    <div id="app">

        <!-- v-if   对元素做删除、插入的动作 创建元素  虚拟dom    -->
        <div class="content" v-if="isShow">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam natus tenetur eum fugit pariatur eos facere eligendi illo laudantium ullam! Ex, vero eius laborum omnis recusandae fuga corporis beatae quo.</div>
        
        
        <!-- v-show  是对 元素的 style中的 display 属性进行修改  dom元素还在 -->
        <div class="content" v-show="isShow">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam natus tenetur eum fugit pariatur eos facere eligendi illo laudantium ullam! Ex, vero eius laborum omnis recusandae fuga corporis beatae quo.</div>



        <div v-if=" age >63">能退休</div>
        <div v-else-if=" age >=53">快退休了 </div>

        <div v-else>不能退休</div>





    </div>
    


    <script>
        let app = Vue.createApp({
            data() {
                return {
                     isShow:false   ,
                     age:56

                }
            },
            
        }).mount("#app")
    </script>
</body>

</html>